<template>
        <div class="buttonIcon" :style="{animation:`iconTurn ${turnSpeed}s ease infinite`}"></div>
</template>

<script lang="ts" setup>


const props = withDefaults(defineProps<{

    turnSpeed?:string

}>(),{

    turnSpeed: '8'

})


</script>

<style>
    @keyframes iconTurn{
            0%{
                transform: rotate(45deg);
            }

            20%{
                transform: rotate(45deg);
            }

            25%{
                transform: rotate(135deg);
            }


            45%{
                transform: rotate(135deg);
            }

            50%{
                transform: rotate(225deg);
            }

            70%{
                transform: rotate(225deg);
            }

            75%{
                transform: rotate(315deg);
            }

            95%{
                transform: rotate(315deg);
            }

            100%{
                transform: rotate(405deg);
            }
        }
</style>

<style scoped>
    .buttonIcon{
    border: 6px solid rgb(255, 255, 255);
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 12px rgb(77, 228, 255);
    
}
</style>